.modal-mask {
    background: rgba(128,82,82,.1);
    transition: opacity .3s ease;
}

.modal-container {
    transition: all .3s ease;
}

.modal-contents {
    @apply flex flex-col rounded-lg shadow;
}

.modal-items {
    @apply w-full overflow-x-auto overflow-y-scroll z-10 bg-white border-t;
    max-height: 400px;
}

.modal-enter {
    opacity: 0;
}

.modal-leave-active {
    opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
    transform: scale(1.1);
}

.fade-enter-active {
    transition: opacity .5s;
}

.fade-leave-active {
    transition: opacity 0s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
